/**
 * Created with JetBrains WebStorm.
 * User: Joseph
 * Date: 24/04/12
 * Time: 9:08 PM
 * To change this template use File | Settings | File Templates.
 */
function prepareAppDOM() {
    app_frame();
    initialize_video();
    initialize_pieces();
    initialize_board();
    initialize_menu();
    last_render = 0;
    last_fullrender = 0;
    saveValue('render' + getUserHangoutId(), '0');
    saveValue('fullrender' + getUserHangoutId(), '1');

}


var images = {};
images['eagle'] = HOST + 'images/eagle.jpg';
images['elf'] = HOST + 'images/elf.jpg';
images['myah'] = HOST + 'images/myah.jpg';
images['board'] = HOST + 'images/board1.png';
images['red'] = HOST + 'images/red.png';
images['blue'] = HOST + 'images/blue.png';
images['coin_head'] = HOST + 'images/coin_head.png';
images['coin_tail'] = HOST + 'images/coin_tail.png';

for (var i = 1; i < 7; i++) {
    images['dice' + i] = HOST + 'images/dice' + i + '.png';
}


function initialize_pieces() {
    var N_eagles = 12;
    var N_elves = 12;

    var new_pieces = {};
    var temp;
    for (i = 0; i < (N_eagles); i++) {
        temp = new MakePiece(50, 50, i * 60 + 10, 50, images['red']);
        new_pieces['_piece' + i] = JSON.stringify(temp);
        new_pieces['_event_order' + '_piece' + i] = '0';
    }
    for (i = N_eagles; i < (N_eagles + N_elves); i++) {
        temp = new MakePiece(50, 50, (i - N_eagles) * 60 + 10, 50 + 60, images['blue']);
        new_pieces['_piece' + i] = JSON.stringify(temp);
        new_pieces['_event_order' + '_piece' + i] = '0';
    }
    temp = new MakePiece(50, 50, 10, 180, images['dice6']);
    new_pieces['_piece' + '_dice' + 1] = JSON.stringify(temp);
    new_pieces['_event_order' + '_piece' + '_dice' + 1] = '0';

    temp = new MakePiece(50, 50, 10, 180, images['coin_head']);
    new_pieces['_piece' + '_coin' + 1] = JSON.stringify(temp);
    new_pieces['_event_order' + '_piece' + '_coin' + 1] = '0';

    saveValue(new_pieces);
}


function initialize_board() {
    var board = {};
    var temp = new MakePiece(440, 440, 45, 0, images['board']);
    board['_board'] = JSON.stringify(temp);
    saveValue(board);
}

function app_frame() {

    var slots = $('<div />').attr('id', 'slots');
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 5; j++) {
            var slot = $('<div />').attr('id', 'slot' + j + '_' + i)
                .attr('class', 'slot')
                .css('left', 2 + i * 53)
                .css('top', 2 + j * 53);
            slots.append(slot);
        }
    }

    var buttons = $('<div />').attr('id', 'buttons');

    var video_screen = $('<div />').attr('id', 'video_screen');

    var controls = $('<div />').attr('id', 'controls')
        .append(slots, buttons);

    var table = $('<div />').attr('id', 'table')
        .append('<p>table</p>');

    var sidebar = $('<div />').attr('id', 'sidebar')
        .append(video_screen, controls);
    var game_area = $('<div />').attr('id', 'game_area')
        .append(table);

    var app_area = $('<div />').attr('id', 'app_area')
        .append(sidebar, game_area);

    $('body').append(app_area);
}

function initialize_video() {

    var canvas = gapi.hangout.layout.getVideoCanvas();
    canvas.setWidth($("#video_screen").width() + 6);
    canvas.setPosition($("#video_screen").position().left - 3, $("#video_screen").position().top);
    canvas.setVisible(true);

}

function initialize_menu() {

    var button1 = $('<div />').attr('id', 'button1');
    var button2 = $('<div />').attr('id', 'button2');

    $('#buttons').append(button1, button2)

    $('#button1').button({label:'Save'})
        .click(function () {
            act_save();
        });


    $('#button2').button({label:'Load'})
        .click(function () {
            act_load();
        });

}